﻿//var pGL; //PhiloGL object
PhiloGL.unpack();
var gl;
var scene;
var atoms3D = []; //array of all atoms in the scene

function prepareCanvas(id) {
    var canvas = document.createElement('canvas');
    canvas.setAttribute('width', 800);
    canvas.setAttribute('height', 800);
    document.getElementById(id).appendChild(canvas);
    
    return canvas;
};

//www.senchalabs.org/philogl/PhiloGL/examples/lessons/1/
//http://www.senchalabs.org/philogl/PhiloGL/examples/lessons/11/

function webGLStart(id) {
   
    //Create application
    PhiloGL(prepareCanvas(id), {
        camera: {
            position: {
                x: 0, y: 2, z: -15
            }
        },
        events: {
            //            onDragStart: function (e) {
            //                pos = {
            //                    x: e.x,
            //                    y: e.y
            //                };
            //            },
            //            onDragMove: function (e) {
            //                var z = this.camera.position.z,
            //            sign = Math.abs(z) / z;

            //                atom.rotation.y += -(pos.x - e.x) / 100;
            //                atom.rotation.x += sign * (pos.y - e.y) / 100;
            //                atom.update();
            //                pos.x = e.x;
            //                pos.y = e.y;
            //            },
            onMouseWheel: function (e) {
                e.stop();
                var camera = this.camera;
                camera.position.z += e.wheel;
                camera.update();
            }
        },
        onError: function () {
            alert("There was an error creating the app.");
        },
        onLoad: function (app) {
            //Unpack app properties
            gl = app.gl;
            var program = app.program;
            scene = app.scene;
            var canvas = app.canvas,
          camera = app.camera;



            




            //Basic gl setup
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clearDepth(1.0);
            gl.enable(gl.DEPTH_TEST);
            gl.depthFunc(gl.LEQUAL);
            gl.viewport(0, 0, +canvas.width, +canvas.height);

            //Create objects here

            //            //Create atom
            //            var atom = new PhiloGL.O3D.Sphere({
            //                nlat: 30,
            //                nlong: 30,
            //                radius: 2,
            //                colors: [1, 0, 0, 1]
            //            });




            //productStore.getAt(0).get('name');






            //Add object to the scene
            //            scene.add(atom);
            //Animate
            //            draw();

            //            //Draw the scene
            //            function draw() {
                            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

            //                //render moon
            //                scene.render();
            //                //request new frame
            //                PhiloGL.Fx.requestAnimationFrame(draw);
            //            }

            //pGL = this;

        }
    });


                };

                var atoms3D; //Contains all the atoms added to the scene

function drawAtoms(pdb) {

    var atom;
    var atom3D;
    var color;

    for (var i = 0; i < pdb.data.atoms.length; i++)  //pdb.data.atoms.length
    {
        atom = pdb.data.atoms[i];

        // Choose the appropriate color for the atom
        if (atom.data.element.trim() === "N" || atom.data.name.trim() === "N") {
            color = [0, 0, 1, 1];
        }
        else if (atom.data.element.trim() === "C" || atom.data.name.trim() === "C") {
            color = [0, 100 / 255, 0, 1];
        }
        else if (atom.data.element.trim() === "O" || atom.data.name.trim() === "O") {
            color = [1, 0, 0, 1];
        }
        else if (atom.data.element.trim() === "H" || atom.data.name.trim() === "H") {
            color = [125 / 255, 249 / 255, 255 / 255, 1];
        }
        else if (atom.data.element.trim() === "S" || atom.data.name.trim() === "S") {
            color = [1, 165 / 255, 0, 1];
        }
        else {
            color = [1, 0, 1, 1];
        }

        atom3D = new PhiloGL.O3D.Sphere({
                nlat: 30,
                nlong: 30,
                radius: .5,
                colors: color, //select appropriate colors
                pickable: true
            });

        atom3D.position = {
            x: atom.data.x,
            y: atom.data.y,
            z: atom.data.z
        };

        atom3D.update();

        scene.add(atom3D);


        atoms3D.push(atom3D); //add the O3D object to the scene objects list
        //console.log(atoms3D[i]); //assumed to work for the time being
        }
        draw();
};

function updateAtoms(pdb) 
{
    //alert("updateAtoms enter");

    var atom;
    for (var i = 0; i < pdb.data.atoms.length; i++)  //pdb.data.atoms.length
    {
        atom = pdb.data.atoms[i]; //1-to-1 correspondence necessary

        // the code below is terribad and will be removed

       // scene.remove(atoms3D[i]);

       // var newAtom = new PhiloGL.O3D.Sphere({
       //     nlat: 30,
       //     nlong: 30,
       //     radius: .5,
       //     colors: [1, 0, 1, 1]
       // });

       // scene.add(newAtom);

        // the code above is terribad and will be removed

       // newAtom.position =
       //          {
       //              x: atom.data.x,
       //              y: atom.data.y,
       //              z: atom.data.z
       //          }

       //          newAtom.update();
        

        atoms3D[i].position =
        {
            x: atom.data.x,
            y: atom.data.y,
            z: atom.data.z
        }

        //alert(atom.data.x + " " + atom.data.y + " " + atom.data.z);

        atoms3D[i].update(); //update positions    
    }
    // console.log("Drawing...")
    draw(); //redraw

    //alert("update atoms quit");
};


//Draw the scene
function draw() {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);


    var lightConfig = scene.config.lights;
    lightConfig.enable = true;
    lightConfig.ambient = {
        r: 0.2,
        g: 0.2,
        b: 0.2
    };
    lightConfig.directional.direction = {
        x: -1.0,
        y: -1.0,
        z: -1.0
    };
    lightConfig.directional.color = {
        r: 0.8,
        g: 0.8,
        b: 0.8
    };



    scene.render();
    PhiloGL.Fx.requestAnimationFrame(draw);
}